<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all" />
    <link rel="stylesheet" href="../css/public.css" media="all" />
    <link rel="stylesheet" type="text/css" href="../css/jquery.timepicker.min.css" />
    <link rel="stylesheet" href="../css/jquery.json-viewer.css" media="all">
    <title>Document</title>
</head>

<body>
    <!-- 2, null, null, '172113724', '23403', '1', 4289, 191, 'N', null, null, null, '1', null, null, null, null, null, '1076648', null -->
    <div class="layuimini-container">
        <div class="layuimini-main">
            <div id="searchBox">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">数据库</label>
                            <div class="layui-input-inline">
                                <select name="database_info" lay-filter="system-select" id="database_info">
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">过程名字</label>
                            <div class="layui-input-inline" style="width: 300px">
                                <input type="text" class="layui-input" autocomplete="off" id="proc_name"
                                    name="proc_name" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                lay-filter="data-search-btn"><i class="layui-icon"></i>获取</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md4" style="overflow-y:auto;">
                <textarea class="layui-textarea" placeholder="入参格式: 2, null, null, 'xxxx', 'xxx', '1', 4289, 191"
                    id="param-input" rows="25"></textarea>
            </div>
            <div class="layui-col-md8" style="overflow-y:auto;padding-left:20px;">
                <table border="1" width="100%">
                    <thead>
                        <th>
                            序号
                        </th>
                        <th>
                            值
                        </th>
                        <th>
                            参数名
                        </th>
                        <th>
                            类型
                        </th>
                        <th>
                            参数类型
                        </th>
                    </thead>
                    <tbody id="compare" align="center" valign="center">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/base.js" charset="utf-8"></script>
<script src="../js/jquery.json-viewer.js" charset="utf-8"></script>
<script id="addOption" type="text/html">
    <!--layui模板引擎，动态添加后台数据-->
    {{# layui.each(d, function(index, item){ }}
<option value='{{  index  }}'>{{ item.name }}</option>
{{# }); }}
</script>
<script>
    layui.config({
        base: '../js/lay-module/'
    }).extend({
        // dtree: 'dtree/dtree', //dtree组件
        myModule: 'moduleMy/myModule' //ajax拦截器
    }).use(['myModule', 'form', "laytpl"], function () {
        var form = layui.form,
            laytpl = layui.laytpl,
            myModule = layui.myModule;
        $.ajax({
            url: `/api/database.json`,
            type: "GET",
            Headers: [
                { key: "lastModDate", value: "Fri, 13 Feb 2013 13:43:19 GMT" }
            ],
            // dataType: "json",
            success: function (res) {
                initSelectData(res)
            },
            error: function (res) {
                if (res && res[0]) {
                    initSelectData(res)
                }
            }
        });
        var selectData;
        var currentSelect;
        function initSelectData(data) {
            selectData = data;
            var getTpl = $("#addOption").get(0).innerHTML;
            var view = $("#database_info").get(0);
            var html = laytpl(getTpl).render(data, function (html) {
                view.innerHTML = html;
            });
            currentSelect = selectData[0]
            form.render('select');
        }
        var view = $("#database_info").get(0);
        //下拉框操作
        form.on('select(system-select)', function (data) {
            currentSelect = selectData[data.value]
        });

        form.on("submit(data-search-btn)", function (data) {
            let { proc_name, is_rawType } = data.field;
            is_rawType = is_rawType == "on"
            if (!proc_name || proc_name == "") {
                layer.msg("无效过程名", { icon: 2, time: 1100 });
            }
            let paramStr = $("#param-input").val()
            if (!paramStr || paramStr.trim() == "") {
                layer.msg("无效入参", { icon: 2, time: 1100 });
            }
            $.ajax({
                url: `/get_proc_param`,
                type: "POST",
                contentType: 'application/json',
                data: JSON.stringify({
                    obj_name: proc_name,
                    url: currentSelect.url,
                    pwd: currentSelect.pwd,
                    user: currentSelect.username
                }),
                timeout: 120000, //超时时间设置，单位毫秒
                success: function (res) {
                    console.log("res:", res)
                    if (res && res[0]) {
                        const compareResult = compareParam(paramStr, res)
                        console.log("compareResult:", compareResult)
                        $("#compare").html(compareResult);
                        // const xml = formatXml(proc_name, is_rawType, res)
                        // const java = formatJava(proc_name, is_rawType, res)
                        // $("#xml-input").val(xml)
                        // $("#java-input").val(java)
                    }
                },
                error: function (res) {
                    console.log("res:", res)
                }
            });
            return false;
        });
    })
    function compareParam(paramStr, data) {
        const params = paramStr.split(",")
        let body = ""
        for (let i = 0; i < data.length; i++) {
            let param = params[i] ? params[i] : ""
            param = param.trim()
            const field = data[i]
            let top = `<tr>`;
            let td = `<td>${field.pos}</td>`;
            td += `<td class="${getInParamColor(param, field.type_name)}">${param}</td>`
            td += `<td>${field.name}</td>`
            td += `<td class="${getInOutColor(field.object_type)}">${field.object_type}</td>`
            td += `<td>${field.type_name}</td>`
            let bottom = `</tr>`;
            body += `${top}${td}${bottom}`
        }
        return body;
    }

    function getInParamColor(data, paramType) {
        if (data == "null") return ""
        if (paramType == "NUMBER" && !validateNumber(data.replaceAll("'", ""))) {
            return "background-red"
        }
        return ""
    }

    function validateNumber(input) {
        const pattern = /^(\-|\+)?\d+(\.\d+)?$/;
        return pattern.test(input);
    }

    function getInOutColor(type) {
        switch (type) {
            case "IN":
                return 'background-green'
            case "OUT":
                return "background-blue"
            case "IN/OUT":
                return "background-cyan"
        }
        return "background-red"
    }
</script>
<style>
    th,
    td {
        padding: 4px;
    }

    .background-blue {
        background-color: #6ac1f7;
    }

    .background-red {
        background-color: #ff6347;
    }

    .background-green {
        background-color: #b1e6a9;
    }

    .background-cyan {
        background-color: #a7faf6;
    }
</style>

</html>